<template>
  <div class="app-content-map" ref="content-map">
    <div class="task-type">
        <!-- <a-select style="width: 220px"  :defaultValue="$store.state.task_type">
          <a-select-option :value="$store.state.task_type">{{$store.state.type_name}}</a-select-option>
        </a-select> -->
    </div>
    <show_png ></show_png>
    <div id="task3" style="border: 2px solid gray;">
      <a-row style="margin: 5px;">
        <a-space>
          <span>任务类型</span>
          <span style="font-weight: 900;">{{$common_apis.Get_task_type_name(optype)}}</span>
          <!-- 判译或检查 -->
          <span>操作类型</span>
          <span style="font-weight: 900;">{{$common_apis.Get_work_type_name(work_type)}}</span>
          <div>
            <a-checkbox @change="onChange_check" style="margin-left: 40px;" autoFocus="false" ref="Change_check" :checked="auot_check">演示</a-checkbox>
              <a-tooltip placement="bottom" style="margin-left: 5px;">
                <template slot="title"><span>勾选此项将对判译结果进行检查(仅针对值为2的数据的检查)</span></template>
                <a-icon type="question-circle" />
            </a-tooltip>
          </div>
        </a-space>
      </a-row>
      <a-row style="margin: 5px;">
        <a-space>
          <div>
            <a-checkbox @change="onChange_auto" style="margin-left: 40px;" autoFocus="false" ref="Change_auto" :checked="auto_next">自动下一个</a-checkbox>
            <a-tooltip placement="bottom" style="margin-left: 5px;">
              <template slot="title"><span>勾选此项将自动切换(快捷键F2)</span></template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </div>
          <a-button type="primary" @click="GetActiveTasks" v-show="auot_check==false">刷新</a-button>
          <a-tooltip placement="bottom" style="margin-left: 5px;" v-show="auot_check==false">
            <template slot="title"><span>查看帮助(快捷键F1)</span></template>
            <a-button type="link" @click="HelpOpen">操作帮助?</a-button>
          </a-tooltip>
        </a-space>
      </a-row>
      <a-row style="margin: 5px;"  v-show="tasks.length>0 && activeTasks.length>0">
        <a-space>
          <span>当前任务：</span>
          <span style="font-weight: 900;">{{activeTask.name}}</span>
        </a-space>
      </a-row>
      <a-row style="margin: 5px;"  v-show="tasks.length>0">
        
      </a-row>
      <div class="result-op c-container new-pmd xpath-log"  v-show="tasks.length>0">
            <div class="op-calendar-pc">
              <div class="op-calendar-pc-box">
                <div class="op-calendar-pc-left">
                  <div class="op-calendar-pc-table-box">
                      <table class="op-calendar-pc-table">
                        <tbody>
                          <tr v-for="(itemTr,indexTr) in HandlData" :key="indexTr">
                            <td v-for="(itemTd,indexTd) in itemTr" :key="indexTd">
                              <div class="op-calendar-pc-relative " @click="nextFeatrue(itemTd.key)">
                                <a href="javascript:void(0);" :class="[doKey==itemTd.key?'op-calendar-pc-table-today':'']">
                                  <span :class="['op-calendar-pc-daynumber',itemTd.properties[optype][work_type].status>=0?'checked':'']">{{itemTd.key+1}}</span>
                                  <a-icon :type="itemTd.properties[optype][work_type].status==2?'check':itemTd.properties[optype][work_type].status==1?'close':'question'"  
                                  :class="['op-calendar-pc-table-almanac',itemTd.properties[optype][work_type].status==2?'changed':'',GetChecked_Changed(indexTr,indexTd)]"/>
                                </a>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                  </div>
                </div>
              </div>
            </div>
      </div>
      <a-row style="margin: 5px;"  v-show="tasks.length>0">
        <a-space>
          <a-button @click="DoUpload" type="primary" :disabled="GetStauts">提交</a-button>
          <a-statistic  :value="page.count_user-page.count" class="demo-class" :suffix="`/${page.count}-${((page.count_user-page.count)/page.count_user*100).toFixed(1)}%`"> 
            <template #prefix>
              <span style="font-size: 15px;color: #2c3131;">解译进度:</span>
            </template>
          </a-statistic>
        </a-space>
      </a-row>
      <a-row  v-show="tasks.length>0">
        <div class="props">
          <ul>
            <li v-show="this.auot_check==false">
              <span class="values__label">AI编号</span>
              <span class="values">{{activeFeatrueProps.taskid}}</span>
            </li>
            <li v-show="this.auot_check==true">
              <span class="values__label">信息</span>
              <!-- <span class="values">判译人员:{{activeFeatrueProps.name}},结果:{{activeFeatrueProps.status}}</span> -->
              <span class="values">判译人员:</span>
              <span class="values" style="font-weight: bold;color: #27282d;">{{activeFeatrueProps.name}}</span>
              <span class="values">,结果:</span>
              <span class="values" style="font-weight: bold;color: #27282d;">{{activeFeatrueProps.status}}</span>
            </li>
            <li>
              <span class="values__label">图斑编号</span>
              <span class="values">{{activeFeatrueProps.JVBH?activeFeatrueProps.JVBH:""}}</span>
            </li>
            <li>
              <span class="values__label">前期时相</span>
              <span class="values">{{activeFeatrueProps.QSX?activeFeatrueProps.QSX:""}}</span>
            </li>
            <li>
              <span class="values__label">前期影像</span>
              <a-tooltip placement="bottom" style="margin-left: 5px;">
                <template slot="title"><span>{{activeFeatrueProps.QQJH?activeFeatrueProps.QQJH:""}}</span></template>
                <span class="values">{{activeFeatrueProps.QQJH?activeFeatrueProps.QQJH:""}}</span>
              </a-tooltip>
            </li>
            <li>
              <span class="values__label">后期时相</span>
              <span class="values">{{activeFeatrueProps.HSX?activeFeatrueProps.HSX:""}}</span>
            </li>
            <li>
              <span class="values__label">后期影像</span>
               <a-tooltip placement="bottom" style="margin-left: 5px;">
                <template slot="title"><span>{{activeFeatrueProps.DQJH?activeFeatrueProps.DQJH:""}}</span></template>
                <span class="values">{{activeFeatrueProps.DQJH?activeFeatrueProps.DQJH:""}}</span>
              </a-tooltip>
            </li>
          </ul>
        </div>
      </a-row>
      <a-row v-show="tasks.length==0" class="empty">
        <a-empty description="没有任务"/>
      </a-row>
    </div>
    <a-drawer
      title="操作帮助"
      placement="left"
      :closable="false"
      :visible="help_visible"
      @close="helpClose"
      width="40%"
    >
      <div class="props">
          <ul>
            <li>
              <span class="values__label">1</span>
              <span class="values text">如果没有你的任务则为空</span>
            </li>
            <li>
              <span class="values__label">2</span>
              <span class="values text">双图模式下无需切换</span>
            </li>
            <li>
              <span class="values__label">3</span>
              <span class="values text">判译值分别为未变化(快捷键数字1)、有变化(快捷键数字2)</span>
            </li>
            <li>
              <span class="values__label">4</span>
              <span class="values text">判译模式下:Enter或空格提交成功后自动刷新剩余的任务</span>
            </li>
            <li>
              <span class="values__label">5</span>
              <span class="values text">检查模式下:下一个(空格),提交(Enter)</span>
            </li>
          </ul>
        </div>
    </a-drawer>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        auto_next:true,
        auot_check:false,

        activeTasks:[],
        activeTask:{},
        optype:"",
        work_type:"",


                    


        activeFeatrueProps:{},
        tasks:[],
        task_copy:[],
        HandlData:[],
        page:{},
        doKey:0,
        tasknum:7*7,
        help_visible:false,
      }
    },
    components: {
      show_png: () => import("./show_png.vue"),
    },
    mounted() {
      this.init_keydown();
      setTimeout(()=>{
        this.GetActiveTasks()
      },1000)
    },
    computed:{
      GetStauts(){
        if(this.tasks.length>0){
          let finds= this.tasks.filter((_task)=>{
            return _task.properties[this.optype][this.work_type].status <0
          })
          if(finds.length>0){
            return true 
          }
          else{
            return false
          }
        } 
        else{
          return true
        }
      },
    },
    methods: {
      init_keydown(){//当前页面监视键盘输入
        document.onkeydown = (e)=> {        
          let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
          let set_key=true
          if(e1){
            let keyCode=e1.keyCode
            if (keyCode == 37) {//左箭头
              this.DoPre()
            } else if (keyCode == 38) {//上箭头
              this.setZoom(1)
            } else if (keyCode == 39) {//右箭头
              this.DoNext()
            } else if (keyCode == 40) {//下箭头
              this.setZoom(-1)
            }else if (keyCode >48 && keyCode <51) {//1 2
              this.SetStatus(keyCode-48)
            }else if (keyCode ==112) { //F1
              this.help_visible==true?this.helpClose():this.HelpOpen()
            }else if (keyCode ==113) { //F2
              this.onChange_auto()
            }
            else if (keyCode ==13) {// enter 
              this.DoUpload()
            }
            else if (keyCode == 32) {// enter 或 空格
              if(this.auot_check==false){
                this.DoUpload()
              }
              else{
                this.DoNext()
              }
            }
            else{
              set_key=false
            }
          }
          if(set_key){
            e.stopPropagation();
            e.preventDefault();
          }
        }
      },
      onChange_auto(){
        this.auto_next=!this.auto_next;
        this.$nextTick(()=>{
          this.$refs.Change_auto.blur();
        })
      },
      onChange_check(){
        this.auot_check=!this.auot_check;
        this.$nextTick(()=>{
          this.$refs.Change_check.blur();
        })
        if(this.auot_check){
          this.GetTasks();
        }
        else{
          this.GetActiveTasks();
        }
      },
      async GetActiveTasks(){
        this.$mitt.emit('clear_map',1);
        this.$mitt.emit('clear_map',2);
        this.activeTasks=[]
        this.activeTask=""
        this.activeFeatrueProps={}
        this.HandlData=[]
        let qs={
          pagesize:0,
          status:0,
          optype: "bigdata,sample"
        }
        if(this.auot_check==true){}
        else{
          qs.name=this.$store.state.user.user.fullname
        }
        let result=await this.$common_apis.axios_get('/search_task?',qs)
        if(result){
          this.activeTasks=result.data
          if(this.activeTasks.length>0){
            this.activeTask=this.activeTasks[0]
            this.optype=this.activeTask.optype
            this.work_type=this.activeTask.work_type
            this.GetTasks()
          }
        }
      },
      
      GetChecked_Changed(indexTr,indexTd){
        if(this.auot_check==true){
          return this.HandlData[indexTr][indexTd].properties[this.optype][this.work_type].status!=this.task_copy[indexTr*7+indexTd].properties[this.optype][this.work_type].status?'checked_changed':''
        }
        else{
          return "";
        }
      },
      // 选择任务类型
      SelectType(value,Option){
        this.GetActiveTasks()
      },
      async GetTasks(pagenum=1){
        this.tasks=[]
        this.activeFeatrueProps={}
        let result=undefined
        if(this.auot_check==true){
          result=await this.$common_apis.axios_get("/checker_get_check_task?",{
            optype: this.$store.state.task_type,
            check_type: 2,
          },true)
        }
        else{
          let qs={
            pagesize:this.tasknum,
            pagenum:pagenum,
            mergeid:this.activeTask.mergeid,
            optype: this.optype,
            work_type: this.work_type,
          }
          if(this.auot_check==true){
            qs.status="2"
            qs.notcheck="true"
          }
          else{
            qs.name=this.$store.state.user.user.fullname
            qs.status='-1'
          }
          result=await this.$common_apis.axios_get('/search?',qs)
        }
        if(result){
          this.GetTasks_end(result);
        }
      },
      GetTasks_end(result){
        console.log(result)
        let tasks_data=result.data
        this.page=result.page
        tasks_data.forEach((_featrue,index)=>{
          _featrue.key=index
          _featrue.other=_featrue.properties.other
        })
        this.tasks=tasks_data
        this.task_copy=JSON.parse(JSON.stringify(tasks_data))
        this.DataHandling();
        if(this.tasks.length>0){
          this.nextFeatrue(0);
        }
      },
      DataHandling(){
        let arrLength = this.tasks.length; // 数组长度
        let num = 7;  // 每页显示 10 条
        let newArr=[]
        let index = 0;
        for (let i = 0; i < arrLength; i++) {
          if (i % num === 0 && i !== 0) { // 可以被 10 整除
            newArr.push(this.tasks.slice(index, i));
            index = i;
          }
          if ((i + 1) === arrLength) {
            newArr.push(this.tasks.slice(index, (i + 1)));
          }
        }
        this.HandlData=newArr
      },
      TaskSelectChange(){
        this.GetTasks()
      },
      nextFeatrue(index=0){
        if(index>this.tasks.length-1){return}
        this.activeFeatrueProps=this.tasks[index].other
        this.activeFeatrueProps.taskid=this.tasks[index].properties.taskid
        if(this.tasks[index].properties[this.$store.state.task_type]){
          this.activeFeatrueProps.name=this.tasks[index].properties[this.$store.state.task_type].name
          this.activeFeatrueProps.status=this.tasks[index].properties[this.$store.state.task_type].status
        }
        this.doKey=index
        this.$mitt.emit('set_img_Featrue',this.tasks[index]);
      },
      DoNext(){
        if(this.doKey<this.tasks.length-1){
          this.nextFeatrue(this.doKey+1);
        }
      },
      DoPre(){
        if(this.doKey>0){
          this.nextFeatrue(this.doKey-1);
        }
      },
      setZoom(zoom){
        this.$mitt.emit('set_zoom',zoom);
      },
      SetStatus(status){
        if(this.tasks.length>0 && this.tasks[this.doKey]){
          this.tasks[this.doKey].properties[this.optype][this.work_type].status=status;
          if(this.auto_next){
            this.DoNext();
          }
          this.$forceUpdate()
        }
      },
      GetStautsCheck(){
        if(this.tasks.length>0){
          let finds= this.tasks.filter((_task)=>{
            return _task.properties[this.optype][this.work_type].status <0
          })
          if(finds.length>0){
            return true 
          }
          else{
            return false
          }
        } 
        else{
          return true
        }
      },
      DoUpload(){
        let _GetStauts=this.GetStautsCheck();
        if(_GetStauts){
          this.$message.info("请全部解译后再上传")
          return;
        }
        let code_status=[]
        this.tasks.forEach((_task,index)=>{
          let _code_status={
            status:_task.properties[this.optype][this.work_type].status,
            code:_task.properties.other.JVBH,
            taskid:_task.properties.taskid,
            worker:_task.properties[this.optype][this.work_type].name,
          }
          code_status.push(_code_status)
        })
        let qs={
          mergeid:this.activeTask.mergeid,
          code_status:JSON.stringify(code_status),
          optype:this.optype,
          work_type:this.work_type
        }
        if(this.auot_check==true){
          qs.check_type=2
        }
        this.$common_apis.axios_post("/update_user?",qs,true)
        .then(res => {
          if (res) {
            this.$message.success(`更新成功`)
            this.$mitt.emit('clear_map',1);
            this.$mitt.emit('clear_map',2);
            this.GetActiveTasks();
          }
        });
      },
      HelpOpen(){
        this.help_visible=true
      },
      helpClose(){
        this.help_visible=false
      },
    },
    destroyed(){
      document.onkeydown =undefined
    }
  }
</script>